<template>
  <div class="data">
    <el-row :gutter="20">
      <el-col :span="24" class="mb20">
        <el-card shadow="hover" class="m-l-10-p-20">
          <template v-slot:header>
            <div class="clearfix">
              <span>注册统计</span>
              <div class="type">
                <el-form label-width="80px">
                  <el-form-item class="mb0" label="搜索">
                    <el-select v-model="type" clearable @change="getRegisterData">
                      <el-option label="昨天" :value="2"></el-option>
                      <el-option label="最近七日" :value="3"></el-option>
                      <el-option label="最近一个月" :value="4"></el-option>
                      <el-option label="最近三个月" :value="5"></el-option>
                      <el-option label="最近半年" :value="6"></el-option>
                      <el-option label="最近一年" :value="7"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </template>
          <div class="text item text-center">
            <el-card shadow="never">
              <v-chart class="chart" :option="register" :autoresize="true"/>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" class="mb20">
        <el-card shadow="hover" class="m-l-10-p-20">
          <template v-slot:header>
            <div class="clearfix">
              <span>课程售卖统计</span>
            </div>
          </template>
          <div class="text item text-center">
            <el-card shadow="never">
              <v-chart class="chart" :option="course" :autoresize="true"/>
            </el-card>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="mb20">
        <el-card shadow="hover" class="m-l-10-p-20">
          <template v-slot:header>
            <div class="clearfix">
              <span>试题统计</span>
            </div>
          </template>
          <div class="text item text-center">
            <el-card shadow="never">
              <v-chart class="chart" :option="question" :autoresize="true"/>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24" class="mb20">
        <el-card shadow="hover" class="m-l-10-p-20">
          <template v-slot:header>
            <div class="clearfix">
              <span>网站访问统计</span>
              <div class="type">
                <el-form label-width="80px">
                  <el-form-item class="mb0" label="搜索">
                    <el-select v-model="level" clearable @change="getBrowseData">
                      <el-option label="昨天" :value="2"></el-option>
                      <el-option label="最近七日" :value="3"></el-option>
                      <el-option label="最近一个月" :value="4"></el-option>
                      <el-option label="最近三个月" :value="5"></el-option>
                      <el-option label="最近半年" :value="6"></el-option>
                      <el-option label="最近一年" :value="7"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </template>
          <div class="text item text-center">
            <el-card shadow="never">
              <v-chart class="chart" :option="browse" :autoresize="true"/>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="index">
  import { use } from 'echarts/core';
  import { LineChart, BarChart, PieChart, FunnelChart } from 'echarts/charts'; //引入图例
  import { CanvasRenderer } from 'echarts/renderers'; //使用canvas渲染，可选使用svg渲染
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    LegendComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';

  use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    LegendComponent,
    LineChart,
    BarChart,
    PieChart,
    FunnelChart,
    CanvasRenderer
  ]);

  const type = ref(4)
  const level = ref(3)

  const labelOption = {
    show: true,
    position: 'insideBottom',
    distance: 15,
    align: 'left',
    verticalAlign: 'middle',
    rotate: 90,
    formatter: '{c}  {name|{a}}',
    fontSize: 16,
    rich: {
      name: {}
    }
  };

  const register = reactive({
    title: {
      text: '注册统计分布',
      subtext: '',
      left: 'center',
      textStyle: {
        fontSize: 13
      }
    },
    tooltip: {trigger: 'axis'},
    legend: {orient: 'horizontal', left: 'right', data: ['项目数']},
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    series: [{
      name: '注册会员人数',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      showBackground: true,
      data: [],
    },{
      name: '注册机构数量',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      showBackground: true,
      data: [],
    },{
      name: '注册班级数量',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      showBackground: true,
      data: [],
    }],
  });

  const course = reactive({
    title: {
      text: '课程售卖统计分布',
      subtext: '',
      left: 'center',
      textStyle: {
        fontSize: 13
      }
    },
    legend: {orient: 'vertical', x: 'left', y: 'bottom'},
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}'
    },
    series: {
      name: '课程售卖数量',
      type: 'funnel',
      maxSize: '90%',
      data: [],
    },
  });

  const question = reactive({
    title: {
      text: '试题统计分布',
      subtext: '',
      left: 'center',
      textStyle: {
        fontSize: 13
      }
    },
    legend: {orient: 'horizontal', left: 'right'},
    series: {
      type: 'pie',
      radius: ['40%', '70%'],
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        alignTo: 'edge',
        formatter: '{name|{b}}\n{time|{c} 道}',
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 15,
        rich: {
          time: {
            fontSize: 10,
            color: '#999'
          }
        }
      },
      labelLine: {
        length: 15,
        length2: 0,
        maxSurfaceAngle: 80
      },
      labelLayout: function (params) {
        const isLeft = params.labelRect.x < 100 / 2;
        const points = params.labelLinePoints;
        // Update the end point.
        points[2][0] = isLeft
          ? params.labelRect.x
          : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points
        };
      },
      data: [],
    },
  });

  const browse = reactive({
    title: {
      text: '网站访问统计分布',
      subtext: '',
      left: 'center',
      textStyle: {
        fontSize: 13
      }
    },
    tooltip: {trigger: 'axis'},
    legend: {orient: 'horizontal', left: 'right', data: ['访问人数']},
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: []
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    series: {
      name: '访问人数',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [],
    },
  });

  const getRegisterData = (type = 4) => {
    $http({
      url: $http.adornUrl('/index/register'),
      method: 'post',
      params: $http.adornParams({
        type: type,
      }),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        register.xAxis.data = data.data.xaxis
        register.series[0].data = data.data.series.member
        register.series[1].data = data.data.series.organization
        register.series[2].data = data.data.series.squad
      }
    })
  }

  const getCourseData = () => {
    $http({
      url: $http.adornUrl('/index/course'),
      method: 'post',
      params: $http.adornParams({}),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        course.series.data = data.data
      }
    })
  }

  const getQuestionData = () => {
    $http({
      url: $http.adornUrl('/index/question'),
      method: 'post',
      params: $http.adornParams({}),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        question.series.data = data.data
      }
    })
  }

  const getBrowseData = (level = 2) => {
    $http({
      url: $http.adornUrl('/index/browse'),
      method: 'post',
      params: $http.adornParams({
        level: level,
      }),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        browse.xAxis.data = data.data.xaxis
        browse.series.data = data.data.series
      }
    })
  }

  onMounted(() => {
    getRegisterData()
    getCourseData()
    getQuestionData()
    getBrowseData()
  })

</script>

<style lang="scss" scoped>
.chart {
  height: 62vh;
  background: #fff;
}
.type {
  float: right;
  padding: 3px 0;
}
</style>
